<template>
	<a-modal :title="title" :width="1400" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading"
		@ok="handleSubmit" @cancel="handleCancel">
		<a-card :bordered="false">
			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">

						<a-col :md="8" :sm="24" v-if="false">
							<a-form-item label="订单ID">
								<a-input v-model="queryParam.orderId" placeholder="请输入订单ID" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="物料名称">
								<a-input v-model="queryParam.materialName" placeholder="请输入物料名称" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="料号">
								<a-input v-model="queryParam.materialCode" placeholder="请输入料号" />
							</a-form-item>
						</a-col>
						<a-col :md="4" :sm="24">
							<a-button type="primary" @click="table.refresh(true)">查询</a-button>
							<a-button @click="() => { queryParam = {}; table.refresh(true) }">重置</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>


			<s-table ref="table" size="default" :columns="columns" :data="getData" :alert="true" :scroll="{
				x: 1800, y: 400
			}" :showPagination="false" :row-selection="rowSelection"
				:rowKey="record => record.orderId + record.orderMaterialId">
				<span slot="materialModelNumber" slot-scope="text, record">
					{{ record.material ? record.material.materialModelNumber : '' }}
				</span>

				<!-- <span slot="image" slot-scope="text">
					<image-preview :images="text" />
				</span> -->
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.material.imageUrl" />
				</span>
				<span slot="action" slot-scope="text, record">
					<a-space>
						<a @click="backStoreRecordModal.show(record)">退库记录</a>
					</a-space>
				</span>
			</s-table>

			<back-store-record-modal ref="backStoreRecordModal" />
			<back-store-edit-form :sourceOrderId="emsOrder.orderId" ref="backStoreEditForm" @handle-ok="handleOk" />
		</a-card>
	</a-modal>
</template>

<script lang="ts">
import { Component, Vue, Ref } from "vue-property-decorator";
import { STable } from '@/components'

import { page } from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'
import BackStoreRecordModal from './backStoreRecordModal.vue'
import BackStoreEditForm from './backStoreEditForm.vue'


type Record = {
	orderMaterialId: string,
	bomName: string,
	materialId: string,
	materialCode: string,
	materialName: string,
	number: number,
	completedNumber: number,
	ckTotalExtraNumber: number,
	returnNumber: number,
	extraNumber: number,
	extraReturnNumber: number,
	useNumber: number,
}

type EmsOrder = {
	orderId: string,
}


@Component({
	components: {
		STable,
		BackStoreRecordModal,
		BackStoreEditForm,
	}
})

export default class ProductionBackStore extends Vue {
	@Ref() readonly table!: any
	@Ref() readonly backStoreEditForm!: BackStoreEditForm
	@Ref() readonly backStoreRecordModal!: BackStoreRecordModal

	visible = false
	title = null
	// 高级搜索 展开/关闭
	advanced = false
	// 查询参数
	queryParam = {
		materialType: '',
		orderId: '',
		pageSize: 10,
		materialName: undefined,
		materialCode: undefined
	}

	columns = [
		{
			align: 'center',
			title: '物料',
			dataIndex: 'materialName'
		},
		{
			align: 'center',
			title: '规格',
			dataIndex: 'materialModelNumber',
			scopedSlots: { customRender: 'materialModelNumber' }
		},
		{
			align: 'center',
			title: '图片',
			dataIndex: 'image',
			scopedSlots: { customRender: 'image' }
		},
		{
			align: 'center',
			title: '物料编码',
			dataIndex: 'materialCode'
		},
		{
			title: '序列号',
			dataIndex: 'productRecord.extend1'
		},
		{
			title: '单个数量',
			// dataIndex: 'number',
			customRender: (text, record, index) => record.number % record.productRecord.number == 0 ? record.number / record.productRecord.number :
				(record.number / record.productRecord.number).toFixed(2),
		},
		{
			align: 'center',
			title: '产品',
			dataIndex: 'productName',
		},
		{
			align: 'center',
			title: 'BOM',
			dataIndex: 'bomName',
			customRender: (text: any, record: Record,) => record.bomName || '/',

		},
		{
			align: 'center',
			title: '总数量',
			dataIndex: 'number'
		},
		{
			align: 'center',
			title: '已正常出库数量',
			dataIndex: '',
			customRender: (text: any, record: Record,) => record.completedNumber - record.extraNumber
		},

		{
			align: 'center',
			title: '已使用数量',
			dataIndex: 'useNumber'
		},
		{
			align: 'center',
			title: '正常待确认退库数量',
			dataIndex: 'returnNumber',
		},
		{
			align: 'center',
			title: '正常剩余可退库数量',
			dataIndex: '',
			customRender(text: any, record: Record,) {
				let number = record.completedNumber - record.extraNumber
				return `${number - record.useNumber - record.returnNumber}`
			}
		},
		{
			align: 'center',
			title: '已额外出库数量',
			dataIndex: '',
			customRender: (text: any, record: Record,) => record.extraNumber
		}, {
			align: 'center',
			title: '额外待确认退库数量',
			dataIndex: 'extraReturnNumber',
		}, {
			align: 'center',
			title: '额外剩余可退库数量',
			dataIndex: '',
			customRender(text: any, record: Record) {
				return `${record.extraNumber - record.extraReturnNumber}`
			}
		},
		{
			align: 'center',
			fixed: 'right',
			title: '操作',
			dataIndex: 'action',
			width: '120px',
			scopedSlots: { customRender: 'action' }
		}
	]

	extra = {}

	selectedRowKeys: string[] = []
	selectedRows: Record[] = []

	confirmLoading = false
	emsOrder: Partial<EmsOrder> = {}

	get routePath() {
		let urlParam = this.$util.getUrlParam(this.$route.path)
		return urlParam
	}

	get materialType() {
		return this.routePath?.materialType || this.$businessEnum.MATERIAL_TYPE_ENUM.material.id
	}

	rowSelection = {
		getCheckboxProps: (record: Record) => ({
			props: {
				disabled: +record.completedNumber === 0 || ((record.completedNumber - record.returnNumber) === 0),
				name: record.materialCode,
			},
		}),
		selectedRowKeys: this.selectedRowKeys,
		onChange: this.onSelectChange
	}


	// 加载数据方法 必须为 Promise 对象
	getData(parameter: { pageNo: number, pageSize: number }) {
		this.queryParam.materialType = this.materialType
		this.queryParam.orderId = this.emsOrder.orderId
		this.queryParam.pageSize = -1
		const params = {
			...parameter,
			...this.queryParam,
		}
		return page(params).then((res) => {
			return res.data
		})
	}

	show(record) {
		this.visible = true
		this.emsOrder = record
		this.title = `退库（${record.orderNumber}）`
		setTimeout(() => {
			this.handleOk()
		}, 100)
	}


	handleOk() {
		this.table.refresh()
	}

	onSelectChange(selectedRowKeys: string[], selectedRows: Record[]) {
		console.log(selectedRowKeys, selectedRows)
		this.selectedRowKeys = selectedRowKeys
		this.selectedRows = selectedRows
	}


	handleSubmit() {
		if (!this.selectedRowKeys.length) {
			return this.$message.info("请选择物料")
		}


		this.backStoreEditForm.show(this.selectedRows.map(item => item.orderMaterialId))
	}

	handleCancel() {
		this.visible = false;
		this.selectedRowKeys = []
		this.selectedRows = []
		this.table.clearSelected()
	}

}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
